<template>
	<view>
		<view class="uni-add-tips-box" v-if="showTip && !stepTip">
		  <view class='uni-add-tips-content' @tap='hideTip' >
				<view>
					<view class="iconfont icon-close close-rd" ></view>
					<view class="uni-add-main">
						<view class="uni-add-main-item">
							<image src="@/static/logo/logo.png"></image>
							<view>
								<view class="ft26">添加小程序</view>
								<view class="ft20 wfqf">回收卡券更方便</view>
							</view>
						</view>
						<view class="uni-add-button" @click.stop="openStep">添加</view>
					</view>
				</view>
		  </view>
		</view>
		<uni-popup ref="pop_step"
			v-if="stepTip"
		>	
		<view style="position: relative;width: 100%;">
			<view class="step-img">
				<image src="@/static/step.png" class="" ></image>
				<view class="step-clost" @click="hideTip">我知道了</view>
			</view>
		</view>

			
			
		</uni-popup>
	</view>
</template>

<script>
	const SHOW_TIP = "SHOW_TIP"
	export default{
		data(){
			return{
				showTip:false,
				stepTip:false
			}
		},
		mounted() {
			
			wx.checkIsAddedToMyMiniProgram({
				success:(res) => {
					if(!res.added){
						this.showTip = !uni.getStorageInfoSync().keys.includes(SHOW_TIP)
					}
				},
				fail:(error) => {
					this.showTip = !uni.getStorageInfoSync().keys.includes(SHOW_TIP)
				}
			})
			
			
			// setTimeout(()=>{
			// 	this.showTip = false
			// },this.duration*1000)
		},
		props:{
			tip:{
				type:String,
				default:"点击「添加小程序」，下次访问更便捷",
				required:true				
			},
			duration:{
				type:Number,
				default:5,
				required:false
			}
		},
		methods:{
			openStep(){
				this.stepTip = true
				setTimeout(() => {
					this.$refs.pop_step.open('center');
					wx.hideTabBar();
				},100)
				
				
			},
			hideTip(){
				uni.setStorageSync(SHOW_TIP,true)
				this.showTip = false
				this.stepTip = false
				wx.showTabBar();
				this.$refs.pop_step.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	$themeColor:#1f354a; //主题色
	// @import "../wyb-popup/iconfont.css";
	.uni-add-tips-box {
	  position: fixed;
	  top:0;
	  right: 0;
	  z-index: 99999;
	  opacity: 0.8;
	  display: flex;
	  justify-content: flex-end;
	  align-items: flex-end;
	  flex-direction: column;
	  width: 400upx;
	  animation: opacityC 1s linear infinite;
	}
	.uni-add-tips-content::before{
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		top:-38upx;
		right:105upx;
		border-width: 20upx;
		border-style: solid;
		display: block;
		border-color:  transparent transparent $themeColor transparent;
	}
	.uni-add-tips-content {
	  border-width: 0upx;
	  margin-top: 180upx;
	  position: relative;
	  background-color: $themeColor;
	  box-shadow: 0 10upx 20upx -10upx $themeColor;
	  border-radius: 12upx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 30upx 20upx;
	  margin-right: 40upx;
	}
	.uni-add-tips-content > text {
	  color: #fff;
	  font-size: 28upx;
	  font-weight: 400;
	}
	@keyframes opacityC{
		0%{opacity: 0.8;}
		50%{opacity: 1;}
	}
	.uni-add-main{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.uni-add-main-item{
		display: flex;
		align-items: center;
		color: #fff;
		margin-right: 26rpx;
	}
	.uni-add-main-item image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 100%;
		margin-right: 10rpx;
	}
	.wfqf{
		opacity: 0.6;
	}
	.uni-add-button{
		background-color: #fff;
		color: #000;
		text-align: center;
		border-radius: 32rpx;
		height: 50rpx;
		line-height: 50rpx;
		width: 90rpx;
		font-size: 26rpx;
		
	}
	.close-rd{
		color: #fff;
		position: absolute;
		right: 10rpx;
		top: 3px;
	}
	.step-img{
		top:-500rpx;
		right: -130rpx;
		position: absolute;
	}
	.step-img image{
		width: 450rpx;
		height: 700rpx;
	}
	.step-clost{
		background-color: #b3b3b3;
		border: 1rpx solid #fff;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 0 auto;
		border-radius: 32rpx;
		color: #fff;
		font-size: 26rpx;
		text-align: center;
		margin-top: 20rpx;
	}
</style>
